<template>
  <div>
    <el-form-item :style="{'width':formItem.width + 'px'}" v-if="formItem.type === 'checkbox'">
      <template #label>
        <formDesignLabel :formItem="formItem" />
      </template>
      <formDesignDescription :formItem="formItem" />
      <el-checkbox-group v-model="formItem.modelValue" :max="formItem.maxSelect" :min="formItem.minSelect">
        <el-scrollbar max-height="300px" style="width:100%">
          <draggable
            class="option-drag-box"
            :group="{ name: 'checkbox' }"
            :animation="300"
            chosenClass="option-chosen"
            dragClass="option-drag"
            handle=".move-option-btn"
            ghostClass="option-ghost"
            :list="formItem.default"
            item-key="placeholder"
          >
            <template #item="{ element: item }">
              <div class="option-box">
                <div class="move-option-btn">
                  <i class="iconfont">&#xe689;</i>
                </div>
                <div class="checkbox-item">
                  <el-checkbox :label="item.label || item.placeholder"></el-checkbox>
                  <el-input v-model="item.label" 
                    class="double-model-textarea" 
                    type="textarea" 
                    autosize 
                    resize="none"
                    :placeholder="item.placeholder"
                    @focus=" (e) => e.target.classList.add('is-focus')"
                    @blur="(e) => e.target.classList.remove('is-focus')"
                  ></el-input>
                  <el-button class="fiel-upload" type="primary" link @click="uploadFile(item)">
                    <i title="添加图片" class="iconfont">&#xe6e6;</i>
                  </el-button>
                  <el-button class="delete-item" type="primary" link @click="deleteItem(item)">
                    <i title="删除选项" class="iconfont">&#xe74b;</i>
                  </el-button>
                </div>
                <div class="file-box" v-if="item.optionFile">
                  <span class="delete-file" @click="deleteFile(item)">
                    <i class="iconfont">&#xe8e7;</i>
                  </span>
                  <el-scrollbar height="200px">
                    <img :src="item.optionFile" alt="">
                  </el-scrollbar>
                </div>
              </div>
            </template>      
          </draggable>
        </el-scrollbar>
      </el-checkbox-group>
      <div class="option-setting">
        <el-button type="primary" link :icon="Plus" class="add-radio-item" @click="addCheckboxItem">添加选项</el-button>
        <el-button type="primary" style="margin-left: 40px" link :icon="Plus" class="add-radio-item" @click="addRadioItemBatch">批量添加选项</el-button>
      </div>
      <div v-if="formDesign.publishSetting.typeId == 4 || curBankType == 1 || curBankType == 1" class="exam-setting">
        <qsAnswer :formItem="formItem" :isMultiple="true" />
      </div>
    </el-form-item>
    <!-- 批量添加选项 -->
    <el-dialog
      v-model="showAddRadioItemBatch"
      title="批量添加选项"
      width="700px"
      append-to-body
      :draggable="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="add-batch-box">
        <div class="left-box">
          <el-input 
            v-model="curOptionText"
            type="textarea"
            :rows="18"
          ></el-input>
        </div>
        <div class="right-box">
          <div class="top-text">预定义选项</div>
          <el-scrollbar height="370px">
            <div class="presuppose-option-list">
              <div class="list-item" v-for="(item, index) in presupposeOption" :key="index">
                <el-button @click="presupposeOptionChoosed(item)" round>{{item.label}}</el-button>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddRadioItemBatch = false">关闭</el-button>
          <el-button type="primary" @click="addRadioItemBatchSubmit">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <ImageUpload v-if="showUpload" v-model:showDialog="showUpload" :isAppendToBody="true" :limit="1" @getImage="getImage"></ImageUpload>
  </div>
</template>
<script setup>
import { defineProps, computed, ref } from 'vue'
import formDesignLabel from "@/views/form/manage/design/components/formDesignLabel.vue";
import formDesignDescription from "@/views/form/manage/design/components/formDesignDescription.vue";
import qsAnswer from "@/views/form/manage/design/components/qsAnswer.vue";
import { Plus } from '@element-plus/icons-vue'
import draggable from "vuedraggable";
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'

//题库分组
const curBankType = computed(()=>{return store.state.formDesignInfo.curBankType})
const store = useStore()
const props = defineProps({
  formItem: {
    type: Object,
  },
})
const formItem = computed(() => { return props.formItem })
const formDesign = computed(()=>{return store.getters.formDesignInfo})
// 添加选项
let num = ref(2)
const addCheckboxItem = () => {
  let text = '选项' + ++num.value
  formItem.value.default.push({label: null, placeholder: text, connect: []})
}
const curOptionText = ref()
// 预定义选项
const presupposeOption = computed(()=>{return store.state.formDesignInfo.presupposeOption})
const showAddRadioItemBatch = ref(false)
// 批量添加选项
const addRadioItemBatch = () => {
  curOptionText.value = ''
  formItem.value.default.forEach(item => {
    curOptionText.value += item.label + '\n'
  })
  curOptionText.value.trim()
  showAddRadioItemBatch.value = true
}
// 选择预定义选项
const presupposeOptionChoosed = (val) => {
  curOptionText.value = val.value
}
// 批量添加选项确认
const addRadioItemBatchSubmit = () => {
  let arr = curOptionText.value.trim().split("\n")
  if(arr?.length < 2){
    ElMessage({
      showClose: true,
      message: '选项不能少于两项',
      type: 'warning'
    })
    return
  }
  num.value = 0
  formItem.value.default = arr.map(item => {
    let text = '选项' + ++num.value
    return {
      label: item, 
      placeholder: text, 
      connect: []
    }
  })
  showAddRadioItemBatch.value = false
}
// 删除选项
const deleteItem = (val) => {
  let curIndex = formItem.value.default.findIndex(item=>item.placeholder == val.placeholder)
  formItem.value.default.splice(curIndex, 1)
}
const showUpload = ref(false)
const curOption = ref(null)
// 上传附件
const uploadFile = (val) => {
  curOption.value = val
  showUpload.value = true
}
const getImage = (images) => {
  curOption.value.optionFile = images[0].url
}
const deleteFile = (val) => {
  val.optionFile = ''
}

</script>

<style scoped lang='scss'>
.com-box{
  width: 100%;
}
.el-checkbox-group{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  transform: translateX(-27px);
}
.option-box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .move-option-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    i{
      font-size: 26px;
      color:$mainColor;
      padding: 0;
    }
  }
  &:hover{
    .move-option-btn{
      visibility: inherit;
    }
  }
}
.checkbox-item{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 2px 0;
  width: 100%;
  .el-checkbox{
    margin-right: 5px;
    margin-left: 10px;
    ::v-deep(.el-checkbox__label){
      display: none;
    }
  }
  .fiel-upload{
    margin-left: 10px;
    visibility: hidden;
    display: none;
    i{
      color:$mainColor;
    }
  }
  &:hover{
    .fiel-upload{
      visibility: inherit;
    }
  }
  .delete-item{
    margin-left: 10px;
    visibility: hidden;
    &:last-child{
      margin-left: 0;
    }
    i{
      color:$mainColor;
    }
  }
  &:hover{
    .delete-item{
      visibility: inherit;
    }
  }
}
.file-box{
  width: 320px;
  height: 200px;
  margin-bottom: 10px;
  position: relative;
  img{
    width: 100%;
  }
  &:hover{
    .delete-file{
      visibility: inherit;
    }
  }
  .delete-file{
    visibility: hidden;
    position: absolute;
    top: 3px;
    right: 9px;
    color: $mainColor;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
    .iconfont{
      background: #F0F1F1;
      padding: 0 8px;
    }
  }
}
.connect-tip{
  color: #999;
  font-size: 12px;
  padding-left: 40px;
}
.add-radio-item{
  margin-top: 10px;
}
.option-setting{
  width: 100%;
}
.exam-setting{
  margin-top: 5px;
  width: 100%;
}
i {
  padding: 5px;
  &:hover {
    cursor: pointer;
    color: $hoverColor;
    background: #F0F1F1;
    border-radius: 3px;
  }
}
.el-select{
  width: 100%;
}
.add-batch-box{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 400px;
  .left-box{
    width: 70%;
    height: 100%;
    // border: 1px #e4dfdf solid;
  }
  .right-box{
    flex: 1;
    .top-text{
      padding-left: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .presuppose-option-list{
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      .list-item{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
      }
    }
  }
}
</style>